<template>
  <el-cascader
    v-bind="$attrs"
    v-loading="loading"
    ref="cascader"
    :class="css"
    :clearable="clearable"
    :options="options"
    :props="props"
    :value="value"
    filterable
    @change="handleCascaderChange"
  ></el-cascader>
</template>

<script>
import { cascaderParse } from '@vimi/utils-tool'

export default {
  components: {},
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    fetchData: { type: Function, required: true },
    clearable: { type: Boolean, default: true },
    placeholder: { type: String, default: '请选择部门' },
    value: { type: [Array, String] },
  },
  data() {
    return {
      options: [],
      allSelect: [],
      select: '',
      props: {
        value: 'agency_id',
        label: 'agency_name',
        children: 'children',
        checkStrictly: true,
        multiple: true,
      },
      loading: false,
    }
  },
  watch: {
    value(val) {
      if (val !== this.select) {
        this.init(val)
      }
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  computed: {
    user() {
      return this.$store.getters.user
    },
    queryAddressCode() {
      return this.user.queryAddressCode || this.user.addressCode
    },
    // orgRegionLever() {
    //   return this.user.orgRegionLever
    // }
  },
  methods: {
    async init(val) {
      this.select = []
      if (typeof val === 'string') {
        this.select = [val]
        this.$emit('change', this.select)
        return
      }
      if (val) {
        val.forEach(item => {
          const index = this.allSelect.findIndex(it => it.agency_id === item)
          if (index >= 0) {
            let node = this.allSelect[index]
            let arr = []
            arr.unshift(node.agency_id)
            if (!node.parent_code) {
              this.select.push(arr)
            } else {
              this.initSetCode(node.agency_code)
            }
          }
        })
      }
      this.$emit('change', this.select)
    },
    initSetCode(code, arr = []) {
      const index = this.allSelect.findIndex(it => it.agency_code === code)
      if (index < 0) {
        return
      }
      let node = this.allSelect[index]
      arr.unshift(node.agency_id)
      if (!node.parent_code) {
        this.select.push(arr)
        return arr
      }
      this.initSetCode(node.parent_code, arr)
    },
    handleCascaderChange(val) {
      // 因为删除单个选中值时getCheckedNodes()取到的还是未删除时的值所以加nextTick
      this.$nextTick(() => {
        const nodes = this.$refs.cascader.getCheckedNodes()
        const values = []
        const labels = []
        nodes.forEach(item => {
          values.push(item.value)
          labels.push(item.label)
        })
        this.select = val
        this.$emit('change', this.select)
        this.$emit('select', values, labels)
      })
    },
    async getData() {
      this.options = []
      let [res] = await this.$utils.promise(
        this.$api.getData('credit', 'credit_agency_info', {
          'agency_type.eq': '1',
          address_code: this.queryAddressCode,
        })
      )
      if (!res.data) {
        return
      }
      this.allSelect = res.data
      this.options = cascaderParse({ data: res.data, key: 'agency_code', parentKey: 'parent_code' })
      this.init(this.value)
    },
    cleared() {
      this.select = []
    },
  },
}
</script>

<style scoped></style>
